<template>
  <div v-loading.fullscreen.lock="loading">
    <div style="position: absolute; left: 30px">
      <el-button type="primary" icon="el-icon-back" @click="goBack" plain round>返回</el-button>
    </div>
    <h1 style="justify-content: space-around; display: flex">
      {{ form.title }}
    </h1>
    <el-row align="center" v-for="o in form.subforms" :key="o.i">
      <el-col :span="12" :push="6">
        <div style="display: flex; justify-content: space-around">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-plus"
            @click="insertSubform(o.i)"
            >插入</el-button
          >
        </div>
        <el-card shadow="hover">
          <div style="display: flex; justify-content: space-between">
            <div style="display: flex; justify-content: center">
              <img
                v-if="!!o.icon"
                :src="o.icon[0]"
                height="60px"
                class="image"
              />
              <div style="line-height: 60px; height: 60px; font-size: xx-large">
                {{ o.title }}
              </div>
            </div>
            <div>
              <el-button
                style="line-height: 40px"
                type="text"
                @click="onEdit(o)"
                >编辑</el-button
              >
              <el-divider direction="vertical"></el-divider>
              <el-button type="text" @click="handleOpen(o)">预览</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-popconfirm @confirm="handleDelete(o.i)" title="确定删除吗？">
                <el-button slot="reference" type="text" style="color: red"
                  >删除</el-button
                >
              </el-popconfirm>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col
        :span="12"
        :push="6"
        style="justify-content: space-around; display: flex"
      >
        <el-button @click="addSubform">添加</el-button>
      </el-col>
    </el-row>
    <el-dialog
      title="添加子表单"
      :visible.sync="createDialogVisible"
      width="30%"
      destroy-on-close
    >
      <form-add-form @ok="handleCreate" :value.sync="subformValue" />
      <!-- <form-add-form -->
    </el-dialog>
    <el-dialog
      title="编辑子表单"
      destroy-on-close
      :visible.sync="editDialogVisible"
      width="30%"
    >
      <form-add-form @ok="handleEdit" :value.sync="subformValue" />
      <!-- <form-add-form -->
    </el-dialog>
    <el-dialog
      title="编辑子表单"
      fullscreen
      destroy-on-close
      :visible.sync="preDialogVisible"
      width="30%"
    >
      <form-create
        v-model="fapi"
        :value.sync="value"
        :rule="rule"
        :option="option"
      />
      <div style="display: flex; justify-content: flex-end; padding: 30px">
        <el-button size="small" type="primary" @click="onSubmit"
          >提交</el-button
        >
        <el-button size="small" @click="preDialogVisible = false"
          >返回</el-button
        >
      </div>
      <!-- <form-add-form -->
    </el-dialog>
  </div>
</template>

<script>
import { generateID, parseConfig, writeJSON } from "@/utils/utils";
import FormAddForm from "./FormAddForm";
import { mapGetters } from "vuex";
import { fileDownload, getData, putJSON } from "@/utils/http";
import { URL_MAP } from "@/config/config";
import Vue from "vue";
export default {
  components: {
    // RGridLayoutPre
  },
  data() {
    return {
      form: {
        title: "",
        subforms: [],
      },
      loading: false,
      formData: [],
      current: null,
      formValue: {},
      createDialogVisible: false,
      editDialogVisible: false,
      preDialogVisible: false,
      subformValue: {},

      fapi: {},
      rule: [],
      value: {},
      option: {
        form: {
          labelPosition: "right",
          size: "mini",
          labelWidth: "128px",
          hideRequiredAsterisk: false,
          showMessage: true,
          inlineMessage: true,
        },
        submitBtn: false,
      },
    };
  },
  components: {
    FormAddForm,
  },
  computed: {
    ...mapGetters(["metedata"]),
  },
  watch: {
    metedata: function (v, ov) {
      this.fetch();
    },
  },
  methods: {
    goBack() {
      this.$router.push({
        name:'index'
      })
    },
    onChange(v) {
      this.current = v;
    },
    insertSubform(i) {
      this.subformValue = {};
      this.createDialogVisible = true;
      this.current = i;
    },
    addSubform() {
      this.createDialogVisible = true;
      this.subformValue = {};
      this.current = null;
    },
    handleCreate(v) {
      console.log(v);
      this.createDialogVisible = false;
      v.i = generateID();
      if (this.current !== null) {
        let index = this.form.subforms.map((o) => o.i).indexOf(this.current);
        if (index >= 0) {
          this.form.subforms.splice(index, 0, v);
          Vue.set(this.form, "subforms", this.form.subforms);
          this.update();
          return;
        }
      }

      this.form.subforms.push(v);
      Vue.set(this.form, "subforms", this.form.subforms);
      this.update();
    },
    onEdit(v) {
      this.subformValue = v;
      this.editDialogVisible = true;
      this.current = v.i;
    },
    handleEdit(v) {
      this.editDialogVisible = false;
      console.log(v);
      let index = this.form.subforms.map((o) => o.i).indexOf(this.current);
      if (index >= 0) {
        this.form.subforms.splice(index, 1, v);
        Vue.set(this.form, "subforms", this.form.subforms);
        this.update();
        return;
      }
    },
    fetch() {
      this.loading = true;
      // console.log(this.metedata)
      getData(URL_MAP.METADATA, {
        name: this.metedata,
      })
        .then((data) => {
          if (data.code === 0) {
            this.$notify.success("获取数据成功！");
            // console.log(data)
            this.form = data.data.form;
            console.log(this.form);
            this.form.subforms = this.form.subforms || [];
          } else {
            this.$notify.error(data.msg);
          }
        })
        .catch((e) => {
          console.log(e);
          this.$notify.error("获取数据失败！");
        })
        .finally(() => {
          this.loading = false;
        });
    },
    update() {
      this.loading = true;
      putJSON(URL_MAP.METADATA, {
        name: this.metedata,
        form: this.form,
      })
        .then((data) => {
          if (data.code === 0) {
            this.$notify.success("更新数据成功！");
          } else {
            this.$notify.error(data.msg);
          }
        })
        .catch((e) => {
          console.log(e);
          this.$notify.error("更新数据失败！");
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onSubmit() {
      // const value = {}
      // parseGridForm(this.formData, value)
      this.fapi.submit((formData, fApi) => {
        this.preDialogVisible = false;
        writeJSON(this.value, "submit");
        console.log(this.value);
      });
    },
    handleDelete(i) {
      let index = this.form.subforms.map((o) => o.i).indexOf(i);
      if (index >= 0) {
        this.form.subforms.splice(index, 1);
        Vue.set(this.form, "subforms", this.form.subforms);
        this.update();
        return;
      }
    },
    handleOpen(o) {
      this.loading = true;
      let downs = [];
      // console.log(o);
      o.rule.forEach((r) => {
        downs.push(fileDownload.get(r));
      });
      Promise.all(downs)
        .then((datas) => {
          let rule = [];
          //
          // this.option = {};
          datas.forEach((data) => {
            if (data.status === 200) {
              rule = rule.concat(parseConfig(data.data));
            } else {
              this.$notify.error(data.statusText);
            }
          });
          this.rule = rule;

          this.preDialogVisible = true;
          this.fapi.setValue(this.value);
        })
        .catch((e) => {
          console.log(e);
          this.$notify.error("获取数据失败！");
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  async mounted() {
    // fileDownload

    this.fetch();
    // this.formData.forEach(v => v.value = {})
  },
};
</script>

<style>
.preview-from {
  /* border: solid 1px #0c0c0c; */
  /* margin-top: 20px; */
  /* margin: 20px; */
  /* background: rgba(230, 230, 230, 0.808); */
  padding-top: 10px;
  padding-bottom: 70px;
  padding: 5%;
  height: fit-content;
  width: calc(100% - 200px);
  /* 
    box-shadow: 0px 1px 8px 1px #6b6b6bcf; */
}

.preview-from .vue-grid-item:not(.vue-grid-placeholder) {
  height: 100%;
}
.preview-from .vue-grid-item .item-text {
  text-align: unset;
  /* position: absolute; */
  /* top: 0; */
  /* bottom: 0; */
  /* left: 0; */
  /* right: 0; */
  padding: 3px;
  /* margin: auto; */
}
.preview-from .columns {
  -moz-columns: 120px;
  -webkit-columns: 120px;
  columns: 120px;
}
.preview-from .node-info {
  position: absolute;
}

.el-button--success {
  background-color: #08979c;
  color: white;
  border-color: #08979c;
}
.el-button--success:hover {
  background-color: #087a9c;
  color: white;
  border-color: #08979c;
}
.el-button--download {
  background-color: #006d75;
  color: white;
  border-color: #006d75;
}
.el-button--download:hover {
  background-color: #00598c;
  color: white;
  border-color: #00598c;
}
.el-button--step {
  background-color: #006d75;
  color: white;
  border-color: #006d75;
}
.el-button--step:hover {
  background-color: #003a8c;
  color: white;
  border-color: #003a8c;
}
.image {
  border: 2px solid #00000036;
  border-radius: 5px;
  box-shadow: 0 0 6px 1px #00000024;
  margin-right: 20px;
}
</style>